<template>
  <div class="login">
    <div class="box">
      <div class="title">
        <div class="img">
          <img src="../static/img/log.png" alt="" class="imgs" />
        </div>
      </div>
      <div class="inp">
        <div class="test">
          <div class="leftTest">
            <h2 style="margin-left: 50px">考试系统</h2>
          </div>
          <div class="rightTest">
            <img
              src="../static/img/er.png"
              alt=""
              class="er"
              @click="qie"
              v-if="flag"
            />
            <img
              src="../static/img/pc.png"
              alt=""
              class="er"
              v-if="flag == false"
              @click="qie"
            />
          </div>
        </div>
        <div class="from" v-if="flag">
          <el-form ref="formRef" :model="params">
            <el-form-item
              prop="username"
              :rules="[{ required: true, message: '请输入账号' }]"
            >
              <el-input
                v-model="params.username"
                placeholder="用户名"
                clearable
                class="input1"
              />
            </el-form-item>
            <el-form-item
              prop="pass"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <el-input
                v-model="params.pass"
                placeholder="请输入密码"
                clearable
                class="input1"
                show-password
                @keyup.enter.native="sunmit"
              />
            </el-form-item>
            <el-button type="primary" class="but" @click="log(data.formRef)">{{data.logTitle}}</el-button>
            <span class="forget">忘记密码</span>
          </el-form>
        </div>
        <div class="erw" v-if="flag == false">
          <div class="big_img">
            <img src="../static/img/big_er.jpg" alt="" class="big" />
          </div>
          <div class="content">
            <p>使用<span class="wei">微信</span>扫一扫进行登录</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
// 引入封装的登录
import { Login } from "../apis/login/login";
import { useRouter } from "vue-router";
// 引入vuex
import $store from "../store/index";
import type { FormInstance } from "element-plus";
// 引入封装的节流
import {throttle} from '../utils/DebounceUtils'
// 切换
const flag = ref(true);
const qie = () => {
  flag.value = !flag.value;
};
const data:any = reactive({
  params: { username: "", pass: "" },
  logTitle: "登录",
  formRef: "",
});
const { params }: any = toRefs(data);
// 登录
const router = useRouter();
const getUserLog=throttle(function(){
  TestLogin();
},500)
const log = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // 调接口
     getUserLog()

    } else {
      return false;
    }
  });
};
const TestLogin = async () => {
  if (navigator.onLine) { // 可通过axios的promise的返回状态判断
    //正常工作
    data.logTitle = "正在登录...";
    const res: any = await Login(params.value);
    console.log(res)
    if (res.errCode === 10000) {
      const toUrl = res.data.menu.filter((item: any) => item.pid === 0);
      const toUrl2 = res.data.menu;
      $store.dispatch("getPidInfo", toUrl2);
      $store.dispatch("getModel", res.data.model);
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push(toUrl[0].url);
      data.logTitle = "登录"
      sessionStorage.setItem("token", res.data.token);
    } else {
      data.logTitle = "登录";
      ElMessage.error(res.errMsg);
    }
  } else {
    //执行离线状态时的任务
    ElMessage.error("网络请求超市");
  }
};
// 回车事件
const sunmit = throttle(function(){
  TestLogin();
},500)
</script>
<style scoped lang='less'>
@import url("../static/css/login/login.css");
</style>